<template>
<div>
  <table border="1" cellspacing="0" width="80%">
    <thead>
    <tr><th>名字</th><th>职位</th><th>生日</th><th>图片</th><th>状态</th><th>操作</th></tr>
    </thead>
    <tbody>
    <tr v-for="em in cutList.records" :key="em.id">
      <td>{{em.name}}</td>
      <td>{{em.job}}</td>
      <td>{{em.birthday}}</td>
      <td>{{em.img}}</td>
      <td>{{em.status}}</td>
      <td>
        <input type="button" value="离职" v-if="em.status!='离职'" @click="dismisson(em.id)">
        <input type="button" value="修改" v-if="em.status!='离职'" @click="findById(em.id)"></td>
    </tr>
    </tbody>
  </table>
  <div>
    <input type="button" v-for="pg in cutList.pages" :key="pg"
           :value="pg" style="margin-left: 10px" @click="findByItem(pg)">
  </div>

  按名字查询:<input type="text" v-model="findObj.name"><br>
  按起始日期<input type="text" v-model="findObj.startDate"><br>
  按结束日期<input type="text" v-model="findObj.endDate"><br>
  <input type="button" value="查询" @click="findByItem(1)"/><br>
  <hr>
  <input type="button" value="添加" @click="this.addDiv=true">
</div>


  <div class="DIV" v-if="updateDiv">
    <div class="contentDiv">
      <img :src="'/project/emFace/'+updateObj.img" width="200" height="200"><br>
      姓名：{{updateObj.name}}<br>
      生日：{{updateObj.birthday}}<br>
      职位：<input type="text" v-model="updateObj.job"><br>
      状态：{{updateObj.status}}<br>
      <input type="button" value="修改" @click="update">
    </div>
  </div>
  <div class="Div" v-if="addDiv">
    <div class="contentDiv">
      姓名：<input type="text" v-model="addObj.name"><br>
      生日：<input type="text" v-model="addObj.birthday"><br>
      职位：<input type="text" v-model="addObj.job"><br>
      头像：<input type="file" ref="faceFile"><br>
      <input type="button" value="添加" @click="add">
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {

  data() {
    return {
      cutList: [],
      findObj: {},
      addObj: {},
      addDiv: false,
      updateDiv: false,
      updateObj: {},
    }
  },
  methods: {
    findByItem(pageNo) {
      this.findObj.pageNo = pageNo;
      axios.get("/project/em/findByItem", {params: this.findObj})
          .then(resp => {
            this.cutList = resp.data;
          })
    },
    async add() {
      //添加员工
      //上传员工头像
      var emObj = new FormData();
      emObj.append("uploadImg", this.$refs.faceFile.files[0]);

      //上传文件请求头
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }

      //接收服务器发送给客户端的上传文件名
      var face = "";
      await axios.post("/project/upload", emObj, config).then(resp => {
        face = resp.data;
      });

      //将上传文件名，添加到addObj对象中
      this.addObj.img = face;
      //向服务器发送请求，完成添加
      axios.get("/project/em/add", {params: this.addObj}).then(resp => {
            if (resp.data == "ok") {
              this.findByItem(1);
              this.addDiv = false;
            }
          }
      );
    },

  findById(id) {
    this.updateDiv = true;
    axios.get("/project/em/findById", {params: {id}}).then(resp => {
      this.updateObj = resp.data;
    })
  },
  update() {
    axios.get("/project/em/update", {params: this.updateObj}).then(resp => {
      if (resp.data == "ok") {
        this.updateDiv = false;
        this.findByItem(1);
      }
    })
  },
  dismisson(id) { //员工离职
    axios.get("/project/em/dimission", {params: {id}}).then(resp => {
      if (resp.data == "ok") {
        this.findByItem(1);
      }
    })
  }
},
  created() {
    this.findByItem(1);

  }
}
</script>

<style scoped>
.Div{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(255,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentDiv{
  width: 600px;
  height: 400px;
  padding: 20px;
  border: 2px solid #000;
  background: white;
}
</style>